<template>

  <el-row :gutter="20" justify="center" style="padding:10px 10px" type="flex">

    <el-col :span="20" justify="center" type="flex">

      <el-row :gutter="15" justify="center" style="padding:10px 10px" type="flex">
        <el-col :span="2">
          <el-button type="primary" v-on:click="jumpToHome">首页</el-button>
        </el-col>
        <el-col :span="18">
          <el-input v-bind:placeholder="placeholder"></el-input>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" v-on:click="jumpToHome">搜索</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="primary">个人中心</el-button>
        </el-col>
      </el-row>


      <el-row :gutter="20" justify="center" style="padding:10px 10px" type="flex">
        <el-col><h2 v-model="title" style="text-align:center" v-bind:placeholder="placeholder">{{ title }}</h2></el-col>
      </el-row>


      <el-row :gutter="20"
      >
        <mavon-editor v-model="handbook" :editable="false"
                      :shortCut="false"
                      :subfield="false"
                      :toolbars="markdownOption"
                      :toolbarsFlag="false"
                      defaultOpen="preview"
                      style="height: 700px"
                      toolbarsBackground="#ffffff"/>
      </el-row>


    </el-col>

  </el-row>


</template>

<script>
import {getBlogApi} from "../../api/blogApi";
import {getParams} from "../../api/url";
import {ECode} from "../../utils/commonUtil"

export default {
  data() {
    return {
      markdownOption: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        strikethrough: true, // 中划线
        mark: true, // 标记
        superscript: true, // 上角标
        subscript: true, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        code: true, // code
        table: true, // 表格
        fullscreen: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        htmlcode: true, // 展示html源码
        help: true, // 帮助
        /* 1.3.5 */
        undo: true, // 上一步
        redo: true, // 下一步
        trash: true, // 清空
        save: true, // 保存（触发events中的save事件）
        /* 1.4.2 */
        navigation: true, // 导航目录
        /* 2.1.8 */
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        /* 2.2.1 */
        subfield: true, // 单双栏模式
        preview: true, // 预览
      },
      handbook: "",
      title: "",
      placeholder: "搜索",
      blogUid: null

    };
  },
  created() {
  },
  watch: {
    '$route': 'getBlog'
  },
  mounted() {
    this.getBlog()
  },

  methods: {

    getBlog: function () {
      this.blogUid =  this.$route.params.uid;

      if (isNaN(parseInt(this.blogUid))) {
        // router.push('404')
        this.$message('没有 blogUid');
      } else {
        getBlogApi(this.blogUid).then(
            response => {
              if (response.code === ECode.SUCCESS) {
                console.log(response.data)
                this.title = response.data.title;
                this.handbook = response.data.content;
              }
            }
        )
      }

    },

    jumpToHome: function () {
      this.$router.push('/blogs')
    }

  }

};

</script>

<style scoped>

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

</style>
